<template>
	<div class="box">
		<div id="screenshot">
			<text class="title">个人健康信息汇总报告</text>
			<table>
				<tr>
					<th></th>
					<th>生理健康<br>问题</th>
					<th>心理健康<br>问题</th>
					<th>生活方式<br>健康问题</th>
					<th>健康素养</th>
					<th>不可改变的<br>健康危险因素</th>
				</tr>
				<tr v-if="info.healthAssessSummaryTable && info.healthAssessSummaryTable.healthLiteracyLongProblem && info.healthAssessSummaryTable.healthLiteracyLongProblem.length <= 0  && 
				info.healthAssessSummaryTable && info.healthAssessSummaryTable.lifeStyleLongProblem && info.healthAssessSummaryTable.lifeStyleLongProblem.length <= 0  && 
				info.healthAssessSummaryTable && info.healthAssessSummaryTable.mentalHealthLongProblem && info.healthAssessSummaryTable.mentalHealthLongProblem.length <= 0  && 
				info.healthAssessSummaryTable && info.healthAssessSummaryTable.noChangeLongProblem && info.healthAssessSummaryTable.noChangeLongProblem.length <= 0  && 
				info.healthAssessSummaryTable && info.healthAssessSummaryTable.physicalHealthLongProblem && info.healthAssessSummaryTable.physicalHealthLongProblem.length <= 0">
					<td :colspan="6">暂无汇总信息</td>
				</tr>
				<tr v-for="(item,index) in arrlength" :key="index" v-else>
					<td :rowspan="arrlength.length" v-if="index == 0" style="width: 65px;background: #00C481;"><div style="width: 30px;margin: 0 auto;color: #fff;">长期问题</div></td>
					<td>{{item.physicalHealthLongProblem}}</td>
					<td>{{item.mentalHealthLongProblem}}</td>
					<td>{{item.lifeStyleLongProblem}}</td>
					<td>{{item.healthLiteracyLongProblem}}</td>
					<td>{{item.noChangeLongProblem}}</td>
				</tr>
			</table>
		</div>
		<div id="screenshot2">
			<text class="title">可改变的健康危险因素排序、重点提示及建议</text>
			<table>
				<tr>
					<th>序</th>
					<th>健康危险因素</th>
					<th>可改善的患病风险重点提示</th>
					<th>建议</th>
				</tr>
				<tr v-if="info && info.healthAssessTipTable && info.healthAssessTipTable.changeTipProposals  && info.healthAssessTipTable.changeTipProposals.length <= 0">
					<td :colspan="4">暂无汇总信息</td>
				</tr>
				<tr v-for="(item,index) in info && info.healthAssessTipTable && info.healthAssessTipTable.changeTipProposals" :key="index" v-else>
					<td style="width: 40px;">{{index+1}}</td>
					<td>{{item.healthFactors}}</td>
					<td>{{item.changeTip}}</td>
					<td>{{item.proposal}}</td>
				</tr>
			</table>
		</div>
		<image :src="base64"></image>
	</div>
</template>

<script>
	import html2canvas from 'html2canvas';
	export default {
		props:{
			info:{
				type: Object,
				default:function(){
					return {}
				}
			}
		},
		name:'reportImgType2',
		watch:{
			info(v){
				var arr = [v.healthAssessSummaryTable.healthLiteracyLongProblem.length,v.healthAssessSummaryTable.lifeStyleLongProblem.length,v.healthAssessSummaryTable.mentalHealthLongProblem.length,v.healthAssessSummaryTable.noChangeLongProblem.length,v.healthAssessSummaryTable.physicalHealthLongProblem.length]
				const maxlength = arr.sort()[arr.length-1]
				for(var a = 0;a<maxlength;a++){
					this.arrlength.push({
						healthLiteracyLongProblem:v.healthAssessSummaryTable.healthLiteracyLongProblem[a],
						lifeStyleLongProblem:v.healthAssessSummaryTable.lifeStyleLongProblem[a],
						mentalHealthLongProblem:v.healthAssessSummaryTable.mentalHealthLongProblem[a],
						noChangeLongProblem:v.healthAssessSummaryTable.noChangeLongProblem[a],
						physicalHealthLongProblem:v.healthAssessSummaryTable.physicalHealthLongProblem[a],
					})
				}
			}
		},
		data() {
			return {
				base64: '',
				consult:['<6','250-400','300','40-50','25-35','200-350','300-500','40-75','25-30','40-75','1500-1700','150','≥6','40','0','无','男≦25,女≦15','6-8','无','经常'],
				arrlength:[]
			}
		},
		methods:{
			toImg(dom) {
				var dom = document.querySelector('#screenshot') // 获取dom元素
				return new Promise((resolve,reject)=>{
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						this.base64 = canvas.toDataURL('image/png')
						resolve(canvas.toDataURL('image/png'))
					});
				})
			},
			toImg2(dom) {
				var dom = document.querySelector('#screenshot2') // 获取dom元素
				return new Promise((resolve,reject)=>{
					html2canvas(dom, {
						width: dom.clientWidth, //dom 原始宽度
						height: dom.clientHeight,
						scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						scrollX: 0,
						useCORS: true, //支持跨域，但好像没什么用
					}).then((canvas) => {
						this.base64 = canvas.toDataURL('image/png')
						resolve(canvas.toDataURL('image/png'))
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		position: fixed;
		width: 1032px !important;
		height: 1566px !important;
		margin: 0 auto;
		left: 0;
		// top:30px;
		top: -10000px;
		#screenshot{
			padding-bottom: 100px;
		}
		.title {
			color: #00B25C;
			font-size: 48px;
			font-weight: bold;
			margin-top: 54px;
		}
		table {			
			margin: 30px 0;
			width: 100%;
			border-collapse:collapse;
			tr {
				font-weight: normal;
				text-align: center;	
				width: 100%;
				th{
					border: 1px solid #fff;
					background-color: #00C481;
					height: 70px;
					color: #FFFFFF;
					margin-right: 1px;
					border-radius:8px 8px 0 0;
					font-size: 23px;
					padding:10px;
					font-weight: 500;
					margin-left: -1px;
					&:nth-of-type(1){
						margin-left: -2px;
					}
					&:nth-last-child(1){
						margin-right: -1px;
					}
				}
				td {
					border: 1px solid #00C481;
					margin-left: -1px;
					margin-top: -1px;
					color: #00C481;
					padding:10px;
					font-size: 20px;
					height: 115px;
				}
			}
			
			tr:nth-child(even) td {
				background-color: #E2FBEF;
			}
			
			tr:nth-child(odd) td {
				background-color: #F6FFFB;
			}
	
			.first {
				min-width: 154px;			
			}
			.second {
				min-width: 138px;
			}
			p:last-child {
				margin-right: 0;
			}
		}
		
		.apply {
			margin: 60px auto;
			background-color: #00C481;
			color: #FFFFFF;
			font-size: 17px;
			width: 140px;
			height: 40px;
			line-height: 40px;
			border-radius: 20px;
			text-align: center;
		}
		th.jingbu{
			box-shadow: 0px -25px 0 0 #F9C036;
			background: #F9C036 !important;
		}
		td.jingbu{
			box-shadow: 0px 25px 0 0 #FFF9E9;
			background: #FFF9E9 !important;
			color: #F7BB2B !important; 
		}
		th.chiping{
			box-shadow: 0px -25px 0 0 #42A8FF;
			background: #42A8FF !important;
		}
		td.chiping{
			box-shadow: 0px 25px 0 0 #EBF6FF;
			background: #EBF6FF !important;
			color: #42A8FF !important; 
		}
		th.tuibu{
			box-shadow: 0px -25px 0 0 #FF5151;
			background: #FF5151 !important;
		}
		td.tuibu{
			box-shadow: 0px 25px 0 0 #FFF3F3;
			background: #FFF3F3 !important;
			color: #FF5151 !important; 
		}
		.decode{
			h2{
				font-size: 26px;
				color: #00C481;
				margin-bottom: 20px;
			}
			font-size: 24px;
			color: #00C481;
		}
	}
</style>
